<link rel="stylesheet" href="/Static/mobile/index/css/swiper.min.css">
<link rel="stylesheet" href="/Static/mobile/index/css/index.css">
<div id='app' style="display: none;">
    <div class='fixed-div'>
        <!--头部搜索-->
        <div class='header-search-div'>
            <div class='form-search-div'>
                <form action="/" @submit.prevent="checkForm" class='form-search'>
                    <i class='iconfont icon-sousuo search-icon'/></i>
                    <input type="text" class='search-inp'
                        v-model='keyword' :placeholder='placeholder'>
                </form>
            </div>
            <div class='cart-icon-div'>
                <i @click="location.href='/mobile/cart/mycart'" class='iconfont icon-gouwuche cart-icon'></i>
            </div>
        </div>

        <div class='header-sort-div'>
            <van-tabs @click='changeSort'>
                <van-tab v-for="(item,index,key) in sort1"
                    :key='key'
                    :data-index='index'
                    :title="item.text"
                >
                    
                </van-tab>
            </van-tabs>
        </div>
    </div>


    <!--首页分类1-->
    <div class='header-sort-div sort-content'>
        <!--分类的内容-->
        <div class='header-sort-content'>
            <!--首页的内容-->
            <div class='content home-content' :class='{active:chooseIndex==0&&!isSearch}'>
                <!--轮播图-->
                <van-swipe class='swiper' :autoplay="3000">
                    <van-swipe-item v-for="(imageItem, index) in home.banner_imgs" :key="index">
                        <img  @click="location.href=imageItem.url" v-lazy="imageItem.img" :src='imageItem.img' />
                    </van-swipe-item>
                </van-swipe>

                <!-- 图标 -->
                <van-row style="margin-top:10px;" type="flex" justify="center" align="center">
                    <van-col style="text-align: center" span="6">
                        <a href="/mobile/index/makemoney">
                            <img width="65" src="http://aidu201710.b0.upaiyun.com/upload/goods/2018-11/01/328391541055790.png">
                        </a>
                    </van-col>
                    <van-col style="text-align: center" span="6">
                        <a href="/mobile/goods/daili">
                            <img width="65" src="http://aidu201710.b0.upaiyun.com/upload/goods/2018-11/01/888651541055789.png">
                        </a>
                    </van-col>
                    <van-col style="text-align: center" span="6">
                        <a id="meiqiakefu">
                            <img width="65" src="http://aidu201710.b0.upaiyun.com/upload/goods/2018-11/01/683661541055789.png">
                        </a>
                    </van-col>
                    <van-col style="text-align: center" span="6">
                        <a href="/mobile/qrcode">
                            <img width="65" src="http://aidu201710.b0.upaiyun.com/upload/goods/2018-12/11/594271544503950.png">
                        </a>
                    </van-col>
                </van-row>
               
                <!--列表内容-->
                <div class='items-list'>
                    <!--本月新品-->
                    <div class='item news-item'>
                        <p class='title'>
                            <img src="/Static/mobile/index/images/xinpin.png" alt="">
                            <span class='text'>本月新品</span>
                        </p>
                        <!--可左右移动的-->
                        <div class="swiper-div swiper-container">
                            <div class="swiper-wrapper swiper">
                                <div class="swiper-slide"
                                    v-for="(imageItem, index) in home.swiper_view" :key="index"
                                >  
                                <img class='prevImg' @click="location.href=imageItem.url" v-lazy="imageItem.img" :src='imageItem.img'/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--热卖单品-->
                    <div class='item'>
                        <p class='title'>
                            <img src="/Static/mobile/index/images/jiebantubiao-.png" alt="">
                            <span class='text'>热卖单品</span>
                        </p>
                        <div class='hot-lists-div'>
                            <ul>
                                <li v-for='(item,index,key) in home.hot_goods' :key='key'>
                                    <img @click="location.href=item.url" :src="item.img" alt="">
                                    <p class='goods_name'>{{item.name}}</p>
                                    <p class='price'>
                                        <span class='money'>￥{{item.price}}</span>
                                        <span class='line_through'>￥{{item.market_pri}}</span>
                                    </p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--学习中心-->
                    <div class='item'>
                        <p class='title'>
                            <img src="/Static/mobile/index/images/sanjiaoxing.png" alt="">
                            <span class='text'>学习中心</span>
                        </p>
                        <div  class='study-div'>
                            <img @click="location.href='/mobile/article/lists'" src="/Static/mobile/index/images/study_center.jpg" alt="">
                        </div>

                    </div>
                </div>
            </div>

            <!--美妆护肤的内容-->
            <template v-for="(typeItem,typeIndex) in sort1">
                <div class='content meizhuang-content' :class='{active:chooseIndex==typeIndex&&!isSearch}'>
                    <ul class='content-ul'>
                        <li @click="location.href=item.url" v-for='(item,index,key) in typeItem.list' :key='key'>
                            <img :src="item.img" alt="">
                            <p class='goods_name'>{{item.goods_name}}</p>
                            <p class='goods_desc'>
                                <span class='desc1'>{{item.desc1}}</span>
                                <span class='desc2'>{{item.desc2}}</span>
                            </p>
                            <p class='buyed'>{{item.buy_num}}人已买</p>
                            <p class='goods_price'>
                                <span class='price'>￥{{item.price}}</span>
                                <span class='origin_price'>原价：<span>￥{{item.market_pri}}</span></span>
                                <span class='buy_btn'>立即购买</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </template>
          
            <div class='content meizhuang-content' :class='{active:isSearch}'>
                <ul class='content-ul'>
                    <li @click="location.href=item.url" v-for='(item,index,key) in searchResult' :key='key'>
                        <img :src="item.img" alt="">
                        <p class='goods_name'>{{item.goods_name}}</p>
                        <p class='goods_desc'>
                            <span class='desc1'>{{item.desc1}}</span>
                            <span class='desc2'>{{item.desc2}}</span>
                        </p>
                        <p class='buyed'>{{item.buy_num}}人已买</p>
                        <p class='goods_price'>
                            <span class='price'>￥{{item.price}}</span>
                            <span class='origin_price'>原价：<span>￥{{item.market_pri}}</span></span>
                            <span class='buy_btn'>立即购买</span>
                        </p>
                    </li>
                </ul>
            </div>

        </div>
    </div>
    <!--底部导航-->
</div>
<include file="Common:nav" />
<style>
.van-tabs__line {
    background-color: #E40075 !important;
}
.van-tabs__wrap--scrollable .van-tab {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    flex: 0 0 25%;
}
.header-sort-div .items-list .news-item {
    margin-top: 0;
}
</style>
<script src='/Static/mobile/index/js/swiper.min.js'></script>
<script src='/Static/mobile/index/js/index.js?i=1'></script>
<script>
//初始化swiper
window.onload = function(){
    var mySwiper = new Swiper('.swiper-container',{
        effect : 'coverflow',
        slidesPerView: "auto",
        centeredSlides: true,
        coverflowEffect: {
            rotate: 0,
            stretch: 20,
            depth: 60,
            modifier: 2,
            slideShadows : true
        },
        loop: true, // 循环模式选项
        observer:true, //修改swiper自己或子元素时，自动初始化swiper
        //observeParents:true//修改swiper的父元素时，自动初始化swiper
    });
}
</script>